<template>
    <el-row class="purchase">
        <el-row>
            <SelectCondition @setCondition="setCondition" @exportItems="exportItems" :accountFlag="false" />
        </el-row>
        <el-row :gutter="10" class="mb8" type="flex">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" @click="showJournalList">新增</el-button>
            </el-col>
        </el-row>
        <el-row>
            <DataTable v-loading="tableLoading" :data-list="dataTable" :eng-th="engTh" v-if="showTable.show"
                @showJournalList="showJournalList" @refreshTable="refreshTable" ref="dataTableRef" />
        </el-row>
        <el-row style="margin-top: 10px;">
            <el-pagination :total="pageInfo.total" background layout="total, sizes, prev, pager, next"
                :page-size="pageInfo.pageSize" :current-page="pageInfo.pageIndex" :page-sizes="[10, 20, 30, 40]"
                @size-change="pageSizeChange" @current-change="selectData" style="float: right;"></el-pagination>
        </el-row>
        <el-dialog :visible.sync="journalTable.show" v-dialogDrag title="新增成本类型" :close-on-click-modal="false"
            :close-on-press-escape="false" :append-to-body="true" top="5vh" width="500px">
            <JournalTable :data-list="journalTable.dataList" :eng-th="journalTable.engTh" :businessId="businessIdValue"
                @changeDataList="changeDataList" @changeJournal="changeJournal" @refreshTable="refreshTable" />
        </el-dialog>
    </el-row>
</template>

<script setup lang="ts">
import { Ref, onMounted, ref } from "vue";
import { queryMatCostType } from '@/requests/api/material';
import { usePagination } from "@/hooks/usePagination"

import SelectCondition from './SelectCondition.vue';
import DataTable from './DataTable.vue';
import JournalTable from "./JournalTable.vue";

import { purTableProps, queryParams } from './data'

onMounted(() => {
    selectData();
})


const showTable = ref({ show: true });

const { dataTable, engTh,
    pageInfo,
    pageSizeChange,
    selectData, tableLoading } = usePagination(queryParams, queryMatCostType, purTableProps, 'businessId')
//设置条件值
const setCondition = (selectCondition: any) => {
    if (queryParams.value.condition !== undefined) {
        console.log('查询条件', selectCondition)
        const { costType } = selectCondition
        queryParams.value.condition.costType = costType
        selectData(1);
    }

}

let journalTable = ref({
    dataList: [],
    engTh: [],
    show: false
});
let businessIdValue: Ref<string | undefined> = ref()
const showJournalList = async (businessId: string) => {
    console.log('子组件事件', typeof (businessId))
    businessIdValue.value = businessId
    journalTable.value.dataList = [];
    // let journalEntryResult = await queryJournalByBusinessId(businessId, {});
    // const data = journalEntryResult.data as any as never[]
    // if (data.length > 0) {
    //     journalTable.value.engTh = Object.keys(data[0]) as any as never[];
    //     console.log('表头', data, engTh.value)
    // }
    // journalTable.value.dataList = data;
    journalTable.value.show = true;
}
const dataTableRef: Ref<InstanceType<typeof DataTable> | null> = ref(null)
const exportItems = () => {
    dataTableRef.value?.exportItems()
}
const changeDataList = (v: never[]) => {
    journalTable.value.dataList = v
}
// const handleAdd = () => {
//     console.log('新增')
// }
const refreshTable = () => {
    selectData(1)
}
const changeJournal = (v: boolean) => {
    console.log('子组件事件', v)
    refreshTable()
    journalTable.value.show = v
}
</script>

<style lang="scss" scoped></style>